<template>
	<view class="conten">
		<view class="conten-top">
			<view class="conten-top-title">
				<text>{{money}}</text>
			</view>
			<view class="conten-top-text">
				<text>可提现金额</text>
			</view>
		</view>
		<view class="detail" @click="goDetail">
			<text>提现明细</text>
			<view class="detailedRight">
				<image src="http://rs.eonfox.cc/clzy/static/Arrow_right02.png" class="detailedRightImg"></image>
			</view>
		</view>
		<view class="withdrawDeposit" v-show="!display && !bangWX">
			<view class="withdrawDeposit-title">
				<text>请输入提现金额</text>
			</view>
			<text class="abposin">￥</text>
			<view class="withdrawDeposit-box">
				<input type="digit" v-model="moneyTx" />
			</view>
			<view class="withdrawDeposit-text">
				<!-- <text>请选择提现账户</text> -->
			</view>
		</view>

		<view style="float:left;" v-show="!display && !bangWX">
			<view class="payw">
				<view>
					<image src="http://rs.eonfox.cc/clzy/static/ali_pay.png" mode=""></image>
					<text class="txt">支付宝</text>
				</view>
				<view>
					<text style="color: #598fc7;margin-right:50upx;" @click="popBox" v-if="isBangali == false">绑定支付宝</text>
					<text style="color: #598fc7;margin-right:50upx;" @click="popBox" v-if="isBangali == true">更换支付宝</text>
					<label class="radio">
						<radio value="r1" :checked="choice" @click="xz('z')" />
					</label>
				</view>
			</view>
			<view class="payw" style="margin-top: 30upx;">
				<view>
					<image src="http://rs.eonfox.cc/clzy/static/wechat.png" mode=""></image>
					<text class="txt">微信</text>
				</view>
				<view>
					<text style="color: #598fc7;margin-right:50upx;" @click="bangWX = true" v-if="isBangwx == false">绑定微信</text>
					<text style="color: #598fc7;margin-right:50upx;" @click="bangWX = true" v-if="isBangwx == true">更换微信</text>
					<label class="radio">
						<radio value="r2" :checked="!choice" @click="xz('w')" />
					</label>
				</view>
			</view>
		</view>

		<view class="BopBox" v-show="display">
			<view class="informationBox">
				<view class="infor-title">
					<text>支付宝账号:</text>
				</view>
				<view class="infor-input">
					<input type="text" value="" @input="inpID" :placeholder="ID" />
				</view>
			</view>
			<view class="informationBox">
				<view class="infor-title">
					<text>真实姓名:</text>
				</view>
				<view class="infor-input">
					<input type="text" value="" @input="inpName" :placeholder="name" />
				</view>
			</view>
			<view class="affirmBut">
				<button type="primary" @click="aliPay()" v-if="isBangali == false">绑定</button>
				<button type="primary" @click="updateAlipay()" v-if="isBangali == true">更换</button>
			</view>
		</view>

		<view class="BopBox" v-show="bangWX">
			<view class="informationBox">
				<view class="infor-title">
					<text>微信账号:</text>
				</view>
				<view class="infor-input">
					<input type="text" value="" @input="dowxID" :placeholder="wxID" />
				</view>
			</view>
			<view class="informationBox">
				<view class="infor-title">
					<text>真实姓名:</text>
				</view>
				<view class="infor-input">
					<input type="text" value="" @input="dowxName" :placeholder="wxName" />
				</view>
			</view>
			<view class="affirmBut">
				<button type="primary" @click="wxPay" v-if="isBangwx == false">绑定</button>
				<button type="primary" @click="updateWxpay" v-if="isBangwx == true">更换</button>
			</view>
		</view>
		<button class="confirm-btn" @click="WithdrawBut2" v-show="!display && !bangWX">
			提现
		</button>
		<payOk :show="payShow" :money="moneyTx" @close="payShow = false" @keyPwd="keyPwd" :paySize="1"></payOk>
	</view>
</template>

<script>
	import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
	import Api from '@/common/api';
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import fns from '@/components/eonfox/fns.js';
	import eonfox from '@/components/eonfox/eonfox.js';
	import payOk from '@/components/payments/payKeyBoard.vue';
	var ef = new eonfox();
	export default {
		data() {
			return {
				money: '0.00',
				moneyTx: '',
				Sofar: '',
				code: '',
				openid: '',
				ID: '', //支付宝账号
				name: '', //支付宝真实姓名
				choice: true,
				display: false,
				isAuth: false,
				payShow: false,
				userid: 0,
				isBang: false,
				bangWX: false,
				wxID: '',
				wxName: '',
				aliId: 0, // 绑定的支付宝信息id
				wxId: '0',
				isBangali: false,
				isBangwx: false
			};
		},
		components: {
			payOk
		},
		async onShow() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#ff5252',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.moneyQuery();
			let params = {};
			let data1 = await Api.apiCall('get', 'single/user/myAmount', params);
			// 不能直接赋值  获取数据有延迟
			setTimeout(() => {
				this.money = data1.amount;
			}, 100)
			// 查询用户是否绑定支付宝/微信
			this.getBanks()
		},
		methods: {
			async getBanks() {
				this.userid = uni.getStorageSync('userInfos').id;
				let params = {
					userId: this.userid
				}
				let res = await Api.apiCall('get', 'ums/userBankcards', params);
				if (res !== '暂无信息') {
					this.isBang = true;
					res.map(v => {
						if (v.accountBank == 'aliPay') {
							this.ID = v.cardNumber + '';
							this.name = v.accountName;
							this.aliId = v.id;
							this.isBangali = true;
						} else if (v.accountBank == 'wxPay') {
							this.wxID = v.cardNumber + '';
							this.wxName = v.accountName;
							this.wxId = v.id + '';
							this.isBangwx = true
						}
					})
				} else {
					this.isBang = false
				}
			},
			async keyPwd(key) {
				let params;
				if (this.choice == true) {
					// 提现到支付宝
					params = {
						memberId: this.userid,
						amount: this.moneyTx,
						payPwd: key,
						authCode: '000000',
						bankId: this.aliId
					}
				} else {
					// 提现到微信
					params = {
						memberId: this.userid,
						amount: this.moneyTx,
						payPwd: key,
						authCode: '000000',
						bankId: this.wxId
					}
				}
				let res = await Api.apiCall('post', 'single/user/withdraw', params);
				if (res == undefined || res == null || res == '') {
					uni.showToast({
						icon: 'none',
						title: '提现失败'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res
					})
				}
				this.payShow = false;
				this.moneyTx = '';
				this.getMYmoney()
			},
			async getMYmoney() {
				let params = {}
				let data1 = await Api.apiCall('get', 'single/user/myAmount', params);
				this.money = data1.amount;
			},
			goDetail() {
				uni.navigateTo({
					url: '/pagesU/user/balance'
				})
			},
			// 绑定支付宝
			async aliPay() {
				this.display = !this.display;
				let params = {
					userId: this.userid,
					cardType: 1,
					accountName: this.name,
					cardNumber: this.ID
				}
				let res = await Api.apiCall('post', 'ums/userBankcards', params);
				if (res == '操作成功') {
					uni.showToast({
						icon: 'none',
						title: res
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '绑定失败，请更换账号！'
					})
				}
				this.getBanks();
			},
			// 更换支付宝
			async updateAlipay() {
				let params = {
					Id: this.aliId,
					userId: this.userid,
					cardType: 1,
					accountName: this.name,
					cardNumber: this.ID
				}

				// let data = await Api.apiCall('POST', 'member/share/list', params, false, "application/json");
				let res = await Api.apiCall('PUT', 'ums/userBankcards', params);

				if (res == '操作成功') {
					uni.showToast({
						icon: 'none',
						title: res
					})
					this.getBanks()
				} else {
					uni.showToast({
						icon: 'none',
						title: '更换失败，请更换账号！'
					})
				}
				this.getBanks()
			},
			// 绑定微信
			async wxPay() {
				this.bangWX = false;
				let params = {
					userId: this.userid,
					cardType: 2,
					accountName: this.wxName,
					cardNumber: this.wxID
				}
				let res = await Api.apiCall('post', 'ums/userBankcards', params);
				if (res == '操作成功') {
					uni.showToast({
						icon: 'none',
						title: res
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '绑定失败，请更换账号！'
					})
				}
				this.getBanks()
			},
			// 更换微信
			async updateWxpay() {
				let params = {
					Id: this.wxId,
					userId: this.userid,
					cardType: 2,
					accountName: this.wxName,
					cardNumber: this.wxID
				}
				let res = await Api.apiCall('PUT', 'ums/userBankcards', params);
				if (res == '操作成功') {
					uni.showToast({
						icon: 'none',
						title: res
					})
					this.getBanks()
				} else {
					uni.showToast({
						icon: 'none',
						title: '更换失败，请更换账号！'
					})
				}
				this.getBanks()
			},


			payWx() {
				var _this = this
				var money = _this.moneyTx * 100
				//console.log(money <= 0, money > _this.money);
				if (money <= 0 || money > _this.money || !/^\d+(\.\d+)?$/.test(money)) {
					uni.showToast({
						title: '提现金额错误',
						icon: 'none'
					})
				} else {
					// #ifdef MP-WEIXIN

					_this.wxMp()
					// #endif
					// #ifdef APP-PLUS
					_this.wxApp()
					// #endif
				}
			},
			async moneyQuery() {
				var _this = this
				let params = {};
				let data1 = await Api.apiCall('get', Api.member.currentMember, params);
				_this.money = data1.blance;
			},
			xz(fun) {
				var that = this;
				if (fun == 'z') {
					that.choice = true;
				} else {
					that.choice = false;
				}

			},
			popBox() {
				var that = this;
				that.display = !that.display;
			},
			inpID: function(event) {
				var that = this;
				that.ID = event.detail.value;
			},
			inpName: function(event) {
				var that = this;
				that.name = event.detail.value;
			},
			dowxID: function(event) {
				var that = this;
				that.wxID = event.detail.value;
			},
			dowxName: function(event) {
				var that = this;
				that.wxName = event.detail.value;
			},
			WithdrawBut() {
				var that = this;
				if (that.moneyTx < 100) {
					fns.err('提现金额必须大于等于100元');
					return
				}
				if (that.choice) {
					//console.log('提现支付宝', that.isAuth);
					if (that.ID == "") {
						that.display = !that.display;
					} else {
						uni.showModal({
							title: '提示',
							content: '你是否要提现' + that.moneyTx + '元到' + that.ID + '账号',
							success: function(res) {
								if (res.confirm) {
									that.payAli();
								} else if (res.cancel) {
									that.display = !that.display;
								}
							}
						})
					}
				} else {
					//console.log('提现微信');
					that.payWx();
				}
			},
			WithdrawBut2() {
				// if (this.moneyTx < 100) {
				// 	fns.err('提现金额必须大于等于100元');
				// 	return
				// }
				if (this.moneyTx > this.money) {
					fns.err('可用水晶不足！');
					return
				}
				if (this.isBang == false) {
					fns.err('请绑定提现账号！');
					return
				}
				this.payShow = true;
			}

		}
	}
</script>

<style>
	.conten {
		width: 100%;
		height: 100%;

	}

	.conten-top {
		width: 100%;
		height: 250upx;
		background-color: #FF5252;
		padding-top: 80upx;
		color: #ffff;
	}

	.conten-top-text {
		width: 100%;
		height: 50upx;
		text-align: center;
		font-size: 32upx;
		margin-top: 30upx;
	}

	.conten-top-text text {
		font-size: 32upx;
		color: #FFFFFF;
	}

	.conten-top-title {
		width: 100%;
		height: 50upx;
		text-align: center;

	}

	.conten-top-title text {
		font-size: 56upx;
		color: #FFFFFF;
	}

	.detail {
		float: left;
		width: 100%;
		height: 100upx;
		border-bottom: 1px solid #dedbdb;
		line-height: 100upx;
		padding-left: 20upx;
		font-size: 32upx;
	}

	.withdrawDeposit {
		width: 100%;
		height: 300upx;
		font-size: 28upx;
		float: left;
	}

	.withdrawDeposit-title {
		width: 90%;
		color: #666666;
		margin-left: 10%;
		line-height: 100upx;
		height: 100upx;
	}

	.withdrawDeposit-box {
		width: 90%;
		height: 70upx;
		background-color: #E8E8E8;
		margin-left: 10%;
		margin-top: 10upx;
		line-height: 70upx;
	}

	.withdrawDeposit-text {
		width: 100%;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		margin-top: 30upx;
	}

	.payw {
		/* float: left; */
		display: flex;
		justify-content: space-between;
		width: 750upx;
		height: 100upx;
		border: 1px #DEDBDB solid;
		line-height: 100upx;
		font-size: 28upx;
		padding-left: 30upx;
	}

	.pay {
		float: left;
		width: 100%;
		height: 100upx;
		border-bottom: 1px #DEDBDB solid;
		line-height: 100upx;
		font-size: 28upx;
		padding-left: 30upx;
		margin-bottom: 80upx;
	}

	.abposin {
		position: absolute;
		width: 40upx;
		height: 40upx;
		margin-left: 15upx;
		font-size: 48upx;
		margin-top: 8upx;
	}

	image {
		width: 48upx;
		height: 48upx;
		margin: 20upx 20upx;
		float: left;
	}

	.txt {
		width: 510upx;
		height: 100upx;
		line-height: 100upx;
		/* float: left; */
	}

	.radio {
		float: right;
		padding-right: 50upx;
	}

	.confirm-btn {
		width: 95%;
		height: 100upx;
		line-height: 100upx;
		color: #fff;
		margin-left: 2.5%;
		background-color: #FF5252;
		border-radius: 4px;
		margin-top: 820upx;
	}

	/* 弹出框样式 */
	.BopBox {
		width: 100%;
		height: 400upx;
		position: absolute;
		background-color: #FFFFFF;
	}

	.BopBox-title {
		width: 100%;
		height: 60upx;
		font-size: 32upx;
		text-align: center;
	}

	.informationBox {
		width: 100%;
		padding: 5upx;
		height: 80upx;
		line-height: 80upx;
		border-bottom: #eee 1px solid;
		font-size: 28upx;
	}

	.infor-title {
		float: left;
		width: 25%;
		height: 80upx;
		text-align: right;
	}

	.infor-input {
		padding-left: 10upx;
		width: 70%;
		height: 50upx;
		float: left;
	}

	.infor-input input {
		width: 100%;
		float: left;
		height: 80upx;
		line-height: 80upx;
	}

	.affirmBut {
		width: 95%;
		height: 60upx;
		margin-top: 80upx;
		margin-left: 2.5%;
	}

	.detailedRight {
		width: 44px;
		position: relative;
		right: 10px;
		top: 5px;
		float: right;
		text-align: right;
	}

	.detailedRightImg {
		width: 20px;
		height: 20px;
	}
</style>
